<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			button{
				width:80px;
				height:30px;
			}
			#div1>div{
				width:300px;
				height:250px;
				border:1px solid red;
				display: none;
			}
			#div1>button.active{
				background: gray;
			}
			#div1>div.active{
				display: block;
			}
		</style>
	</head>
		
	<body>
		<div id="div1">
			<button class="active">按钮1</button>
		    <button>按钮2</button>
		    <button>按钮3</button>
			<div class="active">11111</div>
			<div>22222</div>
			<div>33333</div>
		</div>
		
		
		
		
		
		<script>
			//定义一个构造函数
//			function Person(name,age,sex,boyfriend)
//			{
//				this.name =name;
//				this.age = age;
//				this.sex=sex;
//				this.boyfriend=boyfriend;
//				this.sayName = function()
//				{
//					alert("大家好，我叫"+this.name+",今年"+this.age+",我有"+this.boyfriend );
//				}
//			
//			}
//			var person1  = new Person("小明",18,"男","男朋友");//创建一个person1对象
//			person1.sayName();

			//工厂模式
//			function createCar(book,price,dis)
//			{
//				var obj = new Object();
//				obj.book = book;
//				obj.price= price;
//				obj.dis=dis;
//				obj.sayName = function()
//				{
//					alert("这是汽车的" + this.book+",本车"+this.price+"元,并且还有"+this.dis);
//				}
//				return obj;//obj做为函数的返回值
//			}
//			
//			var person1 = createCar("合格证",150000,"说明书");//利用工厂模式创建一个person1对象
//			person1.sayName();

			//选项卡
			 window.onload = function () {
	            var t1 = new Tab("#div1");
	            t1.init();
	        }
	        function Tab(id) {
	            this.oDiv = document.querySelector(id);
	            this.aBtn = this.oDiv.querySelectorAll("button");
	            this.aDiv = this.oDiv.querySelectorAll("div");
	        }
	
	        Tab.prototype.init = function () {
	            for(var i=0;i<this.aBtn.length;i++){
	                this.aBtn[i].index = i;
	                var This = this;
	                this.aBtn[i].onclick = function () {
	                    This.changeTab(this);
	                }
	            }
	        }
	        Tab.prototype.changeTab = function (oBtn){
	            for(var i=0;i<this.aBtn.length;i++){
	                this.aBtn[i].className = "";
	                this.aDiv[i].style.display = "none";
	            }
	            oBtn.className = "active";
	            this.aDiv[oBtn.index].style.display = "block";
	        }

		</script>
	</body>
</html>
